<template>
  <div class="page-main">
    <a-layout style="height: 100%">
      <queryPage
        ref="queryPageRef"
        v-model:selectedKeys="selectedKeys"
        title="检验单查询"
        :form-component-config="formComponentConfig"
        :form-render-config="formRenderConfig"
        :form-render-keys="renderKeys"
        :table-component-config="tableComponentConfig"
        :table-render-config="tableRenderConfig"
        :table-render-keys="tableRenderKeys"
        :render-data="renderData"
        :loading="isLoading"
        :data="renderData"
        :total="total"
        @query-data="getData"
      >
        <template #top-container>
          <a-tabs v-model="activeKey" @change="changeKey">
            <a-tab-pane key="finishedProduct" title="成品" />
            <a-tab-pane key="rawMaterial" title="原材料" />
            <a-tab-pane key="standardParts" title="标准件" />
            <a-tab-pane key="spareParts" title="零组件" />
            <a-tab-pane key="forgedCastings" title="锻铸件" />
          </a-tabs>
        </template>
        <template #secretLevelName="{ record }">
          <secretLevelInfo
            :record="{
              secretLevel: record.secretLevel,
              secretLevelName: record.secretLevelName,
            }"
          />
        </template>
        <template #operate="{ record }">
          <a-button type="text" @click="handelDetail(record)"
            >检验详情</a-button
          >
        </template>
      </queryPage>
    </a-layout>
    <siderForm
      v-if="siderFormShow"
      ref="siderFormRef"
      :active-key="activeKey"
      :sider-form-title="siderFormTitle"
      @handleClose="handleClose"
    />
  </div>
</template>

<script lang="ts" setup>
  /**
   * 模块引入
   */
  import { nextTick, onMounted, ref } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import { Message } from '@arco-design/web-vue';
  import { getQueryPage, checkCertification } from '@/api/admission/inspection';
  import secretLevelInfo from '@/common/components/secret-level-info/index.vue';
  import inspectTableCloums from './component/inspect-table-cloums';
  import siderForm from './component/sider-form.vue';
  import {
    formComponentConfig,
    formRenderConfig,
  } from './form-comp/base-form-config';
  import {
    tableComponentConfig,
    tableRenderConfig,
  } from './table-comp/base-table-config';
  /**
   * 数据
   */

  const total = ref(0);
  const mdsItemType = ref(2);
  const isLoading = ref(false);
  const renderKeys = ref<any>([]);
  const activeKey = ref('finishedProduct');
  const tableRenderKeys = ref<any[]>([]);
  const renderData = ref<any>([]);
  const selectedKeys = ref();
  const siderFormTitle = ref('');
  const siderFormShow = ref(false);
  const siderFormRef = ref(null);
  const tabObj = ref({});
  const mdsItemTypeList = ref({
    finishedProduct: 2,
    rawMaterial: 3,
    standardParts: 1,
    spareParts: 4,
    forgedCastings: 5,
  });
  tabObj.value = {
    finishedProduct: [
      'checkTaskNo',
      'mdsVendorName',
      'mdsItemId',
      'marque',
      'parentItemSerialNo',
      'planSourceType',
      'proMdsItemId',
      'prtlotNo',
      'name15',
      'receiveType',
      'ynAmmunition',
    ],
    rawMaterial: [
      'checkTaskNo',
      'mdsVendorName',
      'mdsItemId',
      'marque',
      'productModule',
      'prtlotNo',
      'name15',
      'receiveType',
      'planSourceType',
    ],
    standardParts: [
      'checkTaskNo',
      'mdsVendorName',
      'mdsItemId',
      'prtlotNo',
      'name15',
      'receiveType',
      'planSourceType',
    ],
    spareParts: [
      'checkTaskNo',
      'mdsVendorName',
      'mdsItemId',
      'name13',
      'name14',
      'prtlotNo',
      'name15',
      'receiveType',
      'planSourceType',
    ],
    forgedCastings: [
      'checkTaskNo',
      'mdsVendorName',
      'mdsItemId',
      'prtlotNo',
      'receiveType',
      'planSourceType',
    ],
  };
  renderKeys.value = tabObj.value.finishedProduct;

  /**
   * 功能方法
   */
  //  初始化函数
  const init = (): void => {
    const key = `${activeKey.value}`;
    tableRenderKeys.value = inspectTableCloums[key];
  };
  //  切换tab
  const changeKey = (val: any): void => {
    mdsItemType.value = mdsItemTypeList.value[val];
    activeKey.value = val;
    renderKeys.value = tabObj.value[val];
    getData();
    console.log(`output-123`, mdsItemType.value);
  };
  // 获取数据
  const getData = async (queryInfo: any = {}): Promise<void> => {
    isLoading.value = true;
    const params = {
      mdsItemType: mdsItemType.value,
      isAll: 1,
      ...queryInfo,
    };
    try {
      const { data } = await getQueryPage(params);
      if (data) {
        console.log(`output-data`, data);
        total.value = data.total;
        renderData.value = [...data.list];
      }
      isLoading.value = false;
    } catch (error) {
      Message.warning({
        content: error,
      });
    }
  };
  // 查看检验详情
  const handelDetail = async (val: any): Promise<void> => {
    const { data } = await checkCertification(val.id);
    siderFormShow.value = true;
    siderFormTitle.value = '退回详情';
    nextTick(() => {
      siderFormRef.value?.init(data);
    });
  };
  // 关闭详情框
  const handleClose = (): void => {
    refresh();
    siderFormShow.value = false;
  };
  // 刷新，重新获取数据列表
  const refresh = (): void => {
    getData();
  };
  onMounted(() => {
    init();
    getData();
  });
</script>

<style lang="less" scoped>
  /deep/ .arco-radio-group-button {
    width: 100%;
  }

  /deep/ .arco-radio-button {
    width: 50%;
    color: #4e5769 !important;
    text-align: center;
  }

  /deep/ .arco-radio-button.arco-radio-checked {
    color: #1e2228 !important;
  }
</style>
-->
